/* ======================================================================= */
/* IMPORTS
/* ======================================================================= */

/* ----- compass ----- */

@import "compass/css3";

/* ======================================================================= */
/* VARIABLES
/* ======================================================================= */

/* ----- fonts ----- */

$font_family			: "Open Sans", Arial, sans-serif;
$font_primary			: Oswald, Arial, sans-serif;
$font_size				: 13px;
$line_height			: $font_size*1.6;

/* ----- colors ----- */

$color_background		: #f9f9f9;
$color_primary			: #ef4135;
$color_dark				: #0f1216 #0c0e11 #07080A;
$color_mono				: #f3f3f3 #e3e3e3 #d3d3d3 #ccc #999 #666 #333;

/* ----- spacing ----- */

$space_nano				: 10px;
$space_micro			: 20px;
$space_macro			: 30px;
$space_mega				: 50px;
$space_jumbo			: 100px;

/* ----- helpers ----- */

$prefixes				: ("-webkit-", "-moz-", "-ms-", "-o-", "");
$texture				: url(../img/texture.png) 0 0 repeat;
$texture_dark			: url(../img/texture-dark.png) 0 0 repeat;
$transition				: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out, opacity 150ms ease-out;

/* ======================================================================= */
/* MIXINS
/* ======================================================================= */

@mixin selection($color, $background){
    @each $prefix in $prefixes {
        ::#{$prefix}selection {
            color: $color;
            background: $background;
        }
    }
}

/* ======================================================================= */
/* BASE
/* ======================================================================= */

@include selection(#fff, $color_primary);

body{
	background: $color_background;
}

/* ----- link ----- */

a{
	text-decoration: none;
	color: $color_primary;
	
	&, &:before, &:after{
		@include transition($transition);
	}

	&:hover{
		text-decoration: none;
	}
}

/* ----- heading ----- */

h1, h2, h3, h4, h5, h6{
	margin: $space_macro 0;
	font-family: $font_primary;
	font-style: normal;
	font-weight: bold;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: nth($color_mono, 7);

	&:first-child{
		margin-top: 0;
	}

	&:last-child{
		margin-bottom: 0;
	}

	&.light{
		font-weight: 300;
	}

	small{
		margin-left: $space_nano;
		font-weight: 300;
		font-size: 0.6em;
		color: nth($color_mono, 7);
	}

	br + small,
	small.block{
		margin-left: 0;
	}
}

h1.jumbo, .h1.jumbo{ font-size: 4.28em; }
h1.mega, .h1.mega{ font-size: 3.85em; }
h1.large, .h1.large{ font-size: 3.42em; }
h1, .h1{ font-size: 3em; }
h2, .h2{ font-size: 2.57em; }
h3, .h3{ font-size: 2.14em; }
h4, .h4{ font-size: 1.71em; }
h5, .h5{ font-size: 1.28em; }
h6, .h6{ font-size: 1em; }

/* ======================================================================= */
/* ELEMENTS
/* ======================================================================= */

/* ----- button ----- */

.btn{
	padding: 1em 2em;
	font-family: $font_primary;
	font-size: $font_size;
	font-style: normal;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff;
	border: none;
	background: nth($color_mono, 7);
	@include border-radius(0);
	@include transition($transition);

	&:hover,
	&:active,
	&:focus{
		outline: none;
		background-color: $color_primary;
	}
}

/* ----- overlay ----- */

.overlay{
	position: relative;
	display: inline-block;

	img{
		display: block;
		max-width: none;
		width: 100%;
	}

	.overlay-color,
	.overlay-content{
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		z-index: 1;
		@include transition($transition);
	}

	/* color */

	.overlay-color{
		background-color: $color_primary;
	}

	&.transparent .overlay-color{
		background-color: transparent;
	}

	&.white .overlay-color{
		background-color: #fff;
	}

	&.dark .overlay-color{
		background-color: #000;
	}

	&:hover .overlay-color{
		opacity: 0.6;
	}

	/* content */

	.overlay-content{
		padding: 10px;
		z-index: 2;
		text-align: center;
		color: #fff;
	}

	&.transparent .overlay-content{
		color: nth($color_mono, 7);
	}

	&.white .overlay-content{
		color: nth($color_mono, 7);
	}

	i.overlay-content{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 1em;
		height: 1em;
		margin-top: -0.5em;
		margin-left: -0.5em;
		padding: 0;
	}

	&:hover .overlay-content{
		opacity: 1;
	}
}

div.overlay{
	display: block;
}

/* ----- icons ----- */

/* sizes  */

*[class*="ts-icon-"]{
	font-size: 16px;
}

.ts-icon-tiny{
	font-size: 0.5*16px;
}

.ts-icon-small{
	font-size: 0.75*16px;
}

@for $i from 2 through 10{
	.ts-icon-#{$i}x{
		font-size: $i*16px;
	}
}

/* ----- divider ----- */

.divider{
	display: block;
	width: 100%;
	height: 0;
	border-top: 1px solid nth($color_mono, 2);
	margin: $space_macro 0;

	&:before,
	&:after{
		content: "";
		display: block;
		clear: both;
	}

	/* sizes */

	&.divider-mini{
		width: 80px;
	}

	&.divider-nano{
		margin: $space_nano 0;
	}

	&.divider-micro{
		margin: $space_micro 0;
	}

	&.divider-mega{
		margin: $space_mega 0;
	}

	&.divider-jumbo{
		margin: $space_jumbo 0;
	}

	/* types */

	&.divider-center{
		margin-right: auto;
		margin-left: auto;
	}

	&.divider-dash{
		border-top-style: dashed;
	}

	&.divider-bar,
	&.divider-bar-wide,
	&.divider-bar-center{
		position: relative;

		&:before{
			content: "";
			display: block;
			width: 40px;
			height: 2px;
			position: absolute;
			bottom: 0;
			left: 0;
			background: $color_primary;
		}
	}

	&.divider-bar-center{
		&:before{
			left: 50%;
			margin-left: -20px;
		}
	}

	&.divider-bar-wide{
		&:before{
			width: 80px;
		}

		&.divider-bar-center{
			&:before{
				margin-left: -40px;
			}
		}
	}

	&.divider-hash{
		height: 10px;
		border: none;
		background: $texture_dark;
	}
}

/* ======================================================================= */
/* SECTION
/* ======================================================================= */

.section{
	position: relative;

	.section-inner{
		padding: $space_mega $space_macro;
	}
}

/* ----- sizes ----- */

.section-jumbo{
	.section-inner{
		padding: $space_jumbo $space_macro;
	}
}

/* ======================================================================= */
/* ENTRIES
/* ======================================================================= */

.entries{
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	
	.entry{
		margin: 0;
		padding: 0;

		.entry-featured{
			img{
				display: block;
				max-width: none;
				width: 100%;
			}
		}

		.entry-meta{
			list-style: none;
			padding: 0;
			margin: 0;
			overflow: hidden;
			font: normal 400 11px/#{$line_height} $font_primary;
			letter-spacing: 1px;
			text-transform: uppercase;
			color: nth($color_mono, 5);

			li{
				position: relative;
				float: left;
				margin-left: 20px;

				&:before{
					content: "/";
					position: absolute;
					left: -13px;
				}

				&:first-child{
					margin-left: 0;

					&:before{
						display: none;
					}
				}
			}
		}
	}
}

/* ======================================================================= */
/* COMPACT ENTRIES
/* ======================================================================= */

.entries-compact{
	
	.entry{
		.entry-featured{
			display: block;
		}
		
		.entry-header{
			padding: 15px;
			border: 1px solid nth($color_mono, 2);
			border-top: none;
			background: #fff;
		}

		.entry-title{
			margin-bottom: 5px;
			font-size: 14px;
			font-weight: 400;
		}
	}
}

/* ======================================================================= */
/* MASTHEAD
/* ======================================================================= */

/* ----- temp ----- */

#masthead{
	position: relative;

	img{
		display: block;
		width: 100%;
	}
}

/* ======================================================================= */
/* HEADER
/* ======================================================================= */

#header{
	border-top: 5px solid $color_primary;
}

/* ----- brand ----- */

#brand{
	display: block;
	height: 100px;
	text-align: center;

	&:before{
		content: "";
		display: inline-block;
		vertical-align: middle;
		height: 100%;
	}

	#logo{
		display: inline-block;
		vertical-align: middle;
	}

	img{
		max-height: 50px;
	}
}

/* ----- main navigation ----- */

#main-nav{
	display: block;
	height: 50px;
	text-align: center;
	border: 1px solid nth($color_mono, 2);
	border-right: none;
	border-left: none;

	.nav{
		margin: -1px 0;
		font-size: 0.1px;

		li{
			display: inline-block;

			a{
				padding: 0 30px;
				font: normal bold 14px/48px $font_primary;
				text-transform: uppercase;
				letter-spacing: 1px;
				color: nth($color_mono, 7);
				border: 1px solid transparent;
				border-right: none;
				border-left: none;
				background: none;

				&:hover{
					color: $color_primary;
					border-top-color: $color_primary;
					border-bottom-color: $color_primary;
				}
			}

			&.active{
				position: relative;

				&:before{
					content: "";
					display: block;
					width: 0;
					height: 0;
					position: absolute;
					bottom: 0;
					left: 50%;
					margin-left: -5px;
					border: 5px solid transparent;
					border-bottom-color: $color_primary;
				}

				a{
					color: $color_primary;
					border-top-color: $color_primary;
					border-bottom-color: $color_primary;
				}
			}
		}
	}
}

/* ======================================================================= */
/* HELPERS
/* ======================================================================= */

/* ----- performance ----- */

.gpu{
	@include transform(translateZ(0));
}

/* ----- color ----- */

.color{
	color: $color_primary;
}

/* ----- margin ----- */

.nomargin{
	margin: 0;
}

.nomargin-v{
	margin-top: 0;
	margin-bottom: 0;
}

.nomargin-h{
	margin-right: 0;
	margin-left: 0;
}

.margin{
	display: block;
	width: 100%;
	height: $space_micro;

	&:before,
	&:after{
		content: "";
		display: block;
		clear: both;
	}

	/* sizes */

	&.margin-nano{
		height: $space_nano;
	}

	&.margin-macro{
		height: $space_macro;
	}

	&.margin-mega{
		height: $space_mega;
	}

	&.margin-jumbo{
		height: $space_jumbo;
	}
}

/* ----- vertical center ----- */

.vcenter{
	display: table;
	width: 100%;
	height: 100%;

	.vcenter-content{
		position: relative;
		display: table-cell; 
		vertical-align: middle;

		& > *{
			display: inline-block; 
			vertical-align: middle;
		}
	}
}